<template>
  <div class="demo-dropdown-wrap">
    <z-dropdown-button @click="handleButtonClick">
      Dropdown
      <template #overlay>
        <z-menu @click="handleMenuClick">
          <z-menu-item keyVal="1">
            <UserOutlined />
            1st menu item
          </z-menu-item>
          <z-menu-item keyVal="2">
            <UserOutlined />
            2nd menu item
          </z-menu-item>
          <z-menu-item keyVal="3">
            <UserOutlined />
            3rd item
          </z-menu-item>
        </z-menu>
      </template>
    </z-dropdown-button>
    <z-dropdown-button>
      Dropdown
      <template #overlay>
        <z-menu @click="handleMenuClick">
          <z-menu-item keyVal="1">
            <UserOutlined />
            1st menu item
          </z-menu-item>
          <z-menu-item keyVal="2">
            <UserOutlined />
            2nd menu item
          </z-menu-item>
          <z-menu-item keyVal="3">
            <UserOutlined />
            3rd item
          </z-menu-item>
        </z-menu>
      </template>
      <template #icon><UserOutlined /></template>
    </z-dropdown-button>
    <z-dropdown-button disabled @click="handleButtonClick">
      Dropdown
      <template #overlay>
        <z-menu @click="handleMenuClick">
          <z-menu-item keyVal="1">
            <UserOutlined />
            1st menu item
          </z-menu-item>
          <z-menu-item keyVal="2">
            <UserOutlined />
            2nd menu item
          </z-menu-item>
          <z-menu-item keyVal="3">
            <UserOutlined />
            3rd item
          </z-menu-item>
        </z-menu>
      </template>
    </z-dropdown-button>
    <z-dropdown>
      <template #overlay>
        <z-menu @click="handleMenuClick">
          <z-menu-item keyVal="1">
            <UserOutlined />
            1st menu item
          </z-menu-item>
          <z-menu-item keyVal="2">
            <UserOutlined />
            2nd menu item
          </z-menu-item>
          <z-menu-item keyVal="3">
            <UserOutlined />
            3rd item
          </z-menu-item>
        </z-menu>
      </template>
      <z-button>
        Button
        <DownOutlined />
      </z-button>
    </z-dropdown>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const handleButtonClick = e => {
      console.log('click left button', e)
    }
    const handleMenuClick = e => {
      console.log('click', e)
    }
    return {
      handleButtonClick,
      handleMenuClick
    }
  }
})
</script>

<style lang="less" scoped>
.demo-dropdown-wrap :deep(.ant-dropdown-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>
